<template>
  <div class="c-ph24 c-pt40 c-flex-row c-aligni-center">
    <span class="c-fw-b c-fs30 c-lh c-pl20 c-p"><span class="c-pa theme-bd-l2 theme-bd-r2 c-h c-p-l0 c-br8 c-w0"></span>{{titleName}}</span>
    <span class="c-fs20 c-fc-sblack c-pt4 c-ml16 c-w0 c-flex-grow1 c-mr16 c-text-ellipsis1">{{titleDesc}}</span>
    <span class="c-fs20 c-fc-gray c-pl8" v-if="showMore" @click="clickMore">查看更多</span>
    <i class="iconfont c-fs18 c-fc-gray" v-if="showMore">&#xe908;</i>
  </div>
</template>

<script>
export default {
  name: "IndexThreeTitleCom",
  components: {},
  props: {
    titleName: {
      type: String,
      default: ''
    },
    titleDesc: {
      type: String,
      default: '',
    },
    showMore: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    clickMore() {
      this.$emit('clickMore')
    },

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mb3_orange .theme-bd-r2 {
  border-right: 2px solid #fe9901;
}
.mb3_blue .theme-bd-r2 {
  border-right: 2px solid #0099ff;
}
.mb3_ruby .theme-bd-r2 {
  border-right: 2px solid #d60808;
}
.mb3_green .theme-bd-r2 {
  border-right: 2px solid #01cc00;
}
.mb3_blown .theme-bd-r2 {
  border-right: 2px solid #976800;
}
</style>
